import { APlugin, TSelectRanage } from '../types/common.interface';
import { Injectable, Inject, PluginInjectable } from '../decorators/inject';
import { NExcel } from '../types';
import { copyIcon, triangleRightFill, insertHMiddle, coputText, cut, paste, pasteText, insertTop, insertDown, insertLeft, insertRight, mark, setting } from '../vars/icons';
import './right-menu.less';
import { TableEvent } from '../cors/table-event';
type TRightMenu = {
    disabled: boolean;
    icon?: string;
    payload?: any;
    name: string;
    id:  string ;
    children: (TRightMenu[]) | null;
}
function findTargetMenu(menus: TRightMenu[], targetId: string): null | TRightMenu {
    if(!Array.isArray(menus)) return null;
    for(let item of menus) {
        if(item.id === targetId) {
            return item;
        }
        if(Array.isArray(item.children)) {
            let res = findTargetMenu(item.children, targetId);
            if(res) {
                return res;
            }
        }
    }
    return null;
}
@Injectable()
@PluginInjectable('RightMenuPlugin')
export class RightMenuPlugin extends APlugin {
    protected container: HTMLElement;
    protected menus: TRightMenu[];
    constructor(@Inject(NExcel.OperateContainerToken) protected OperateContainerEle: HTMLElement, protected tableEvent: TableEvent) {
        super();
    }
    protected createMenuItem(menu: TRightMenu) {
        let ele = document.createElement('div');
        ele.setAttribute('class', 'z-table-contextmenu-item');
        ele.setAttribute('zValue', menu.id);
        let nameEle = document.createElement('div');
        nameEle.setAttribute('class','z-table-contextmenu-name-container');
        nameEle.innerHTML = `
            <div class="z-table-contextmenu-icon">
            ${menu.icon ? menu.icon : ''}
            </div>
            <div class="z-menu-name">${menu.name}</div>
        `;
        ele.append(nameEle);
        // ${menu.children && menu.children.length > 0 ? `<div class="z-table-contextmenu-children-icon"></div>` : ``}
        if(menu.children && menu.children.length > 0) {
            let triangleContainer = document.createElement('div');
            triangleContainer.setAttribute('class', 'z-table-contextmenu-icon triangle');
            triangleContainer.innerHTML = triangleRightFill;
            nameEle.append(triangleContainer);
            let childrenContainer = document.createElement('div');
            childrenContainer.setAttribute('class', 'z-table-ctxMenu-children');
            for(let child of menu.children) {
                let childEle = this.createMenuItem(child);
                childrenContainer.append(childEle)
            }
            ele.append(childrenContainer);
        }
        return ele;
    }
    protected updateMenu(menus: TRightMenu[], ele: HTMLElement) {
        this.menus = menus;
        for(let menu of menus) {
            let menuItemEle = this.createMenuItem(menu);
            this.container.append(menuItemEle);
        }
    }
    protected createRightNenu() {
        this.updateMenu([
            {
                disabled: false,
                name: '复制',
                id: 'copy',
                children: null,
                icon: copyIcon
            },
            {
                disabled: false,
                name: '复制文本',
                id: 'copy_text',
                icon: coputText,
                children: null
            },
            {
                disabled: false,
                name: '剪切',
                id: 'cut',
                icon: cut,
                children: null
            },
            {
                disabled: false,
                name: '粘贴',
                id: 'paste',
                icon: paste,
                children: null
            },
            {
                disabled: false,
                name: '只粘贴文本',
                id: 'paste_text',
                icon: pasteText,
                children: null
            },
            {
                disabled: false,
                name: '插入',
                id: 'insert',
                icon: insertHMiddle,
                children: [
                    {
                        disabled: false,
                        name: '上方插入',
                        id: 'insertUp',
                        children: null,
                        icon: insertTop
                    },
                    {
                        disabled: false,
                        name: '下方插入',
                        id: 'insertDown',
                        children: null,
                        icon: insertDown
                    },
                    {
                        disabled: false,
                        name: '左边插入',
                        id: 'insertLeft',
                        children: null,
                        icon: insertLeft
                    },
                    {
                        disabled: false,
                        name: '右边插入',
                        id: 'insertRight',
                        children: null,
                        icon: insertRight
                    }
                ]
            },
            {
                disabled: false,
                name: '删除',
                id: 'delete',
                children: null
            },
            {
                disabled: false,
                name: '清除内容',
                id: 'clear',
                children: null
            },
            {
                disabled: false,
                name: '插入批注',
                id: 'add-mark',
                icon: mark,
                children: null
            },
            {
                disabled: false,
                name: '设置单元格格式',
                id: 'setting-cells',
                icon: setting,
                children: null
            }
        ], this.container);
    }
    public init(): void {
        this.container = document.createElement('div');
        const hidden = () => {
            if(this.container.style.display === 'none') return;
            this.container.removeAttribute('style');
        }
        this.container.addEventListener('click', (e) => {
            e.stopPropagation();
            e.preventDefault();
            let ele: HTMLElement = <any>e.target;
            while(true) {
                if(ele.classList.contains('z-table-contextmenu-item')) {
                    let menuid = ele.getAttribute('zvalue');
                    console.log(ele, menuid, this.menus);
                    console.log(this)
                    let targetMenu = findTargetMenu(this.menus, menuid);
                    // console.log(targetMenu)
                    if(targetMenu) {
                        //@ts-ignore
                         this.tableEvent.customEvent$.next({type: 'right-menu', payload: targetMenu.payload});
                         console.log(this.tableEvent);
                         // @ts-ignore
                         this.tableEvent.id = 1;
                    }
                }
                if(ele.tagName.toLocaleLowerCase() === 'body' || ele.tagName.toLocaleLowerCase() === 'html' ) {
                    break;
                } else {
                    ele = ele.parentElement;
                }
            }
            hidden();
        });
        this.container.setAttribute('class', 'z-table-contextmenu-container');
        this.OperateContainerEle.append(this.container);
        this.createRightNenu();

        this.tableEvent.contextMenu$.subscribe(res => {
            if(this.container.hasAttribute('style')) {
                return hidden();
            }   
            // if(this.container.style.display !== 'none') {
                
            // }
            this.container.setAttribute('style', `display: block;top: ${res.y}px; left: ${res.x}px;`);
        });

        this.OperateContainerEle.addEventListener('click', hidden);
        document.addEventListener('click', hidden);
        document.addEventListener('contextmenu', hidden);
    }
    public destroy(): void {
        
    }
}